<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-list-item flex ng-mouseover="hover=true" ng-mouseout="hover=false">
  <div flex="100"
       layout="row"
       layout-align="start stretch"
       class="che-list-item-row">
    <div layout="row"
         layout-align="start center"
         class="che-checkbox-area"
         ng-if="workspaceItemCtrl.isSelectable === true">
      <che-list-item-checked ng-model="workspaceItemCtrl.isSelect"
                             ng-show="('RUNNING' === workspaceItemCtrl.getWorkspaceStatus() || 'STOPPED' === workspaceItemCtrl.getWorkspaceStatus())"
                             che-aria-label-checkbox="Workspace {{workspaceItemCtrl.workspace.config.name}}"
                             ng-click="workspaceItemCtrl.onCheckboxClick()"></che-list-item-checked>
    </div>
    <div flex
         layout-xs="column" layout-gt-xs="row"
         layout-align-gt-xs="start center"
         layout-align-xs="start start"
         class="che-list-item-details">

      <!-- Name -->
      <div flex-gt-xs="25"
           layout="row"
           class="workspace-item-name"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Name</span>
        <div layout="row" flex>
          <workspace-status-indicator flex="none" che-status="workspaceItemCtrl.getWorkspaceStatus()"></workspace-status-indicator>
          <div class="workspace-name-clip">
            <span uib-tooltip="{{'RUNNING' === workspaceItemCtrl.getWorkspaceStatus() ? 'Running' : 'Last modified: ' + (workspaceItemCtrl.workspace.attributes.updated | amTimeAgo)}}"
                  class="che-hover">
              <che-clip-the-middle>{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspace.config.name}}</che-clip-the-middle>
            </span>
          </div>
        </div>
        <i class="fa fa-clock-o workspace-item-temp" ng-if="workspaceItemCtrl.workspace.temporary"></i>
      </div>

      <!-- RAM -->
      <div flex-gt-xs="15"
           class="che-list-item-name workspace-item-ram"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>RAM</span>
        <span class="workspace-consumed-value">{{workspaceItemCtrl.getMemoryLimit(workspaceItemCtrl.workspace)}}</span>
      </div>

      <!-- Projects -->
      <div flex-gt-xs="15"
           class="che-list-item-name workspace-item-projects"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Projects</span>
        <span class="che-hover">{{workspaceItemCtrl.workspace.config.projects.length}}
          <span ng-if="workspaceItemCtrl.displayLabels"> project<span ng-if="workspaceItemCtrl.workspace.config.projects.length > 1">s</span></span></span>
      </div>

      <!-- Stack ID -->
      <div flex-gt-xs="30"
           class="che-list-item-name workspace-item-stack"
           ng-click="workspaceItemCtrl.redirectToWorkspaceDetails();">
        <span class="che-xs-header noselect" hide-gt-xs>Stack</span>
        <span class="che-hover">{{workspaceItemCtrl.workspace.attributes.stackId}}</span>
      </div>

      <!-- Actions -->
      <div flex-gt-xs="15"
           class="workspace-item-actions">
        <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
        <span class="che-list-actions">
          <che-workspace-status che-workspace-item="workspaceItemCtrl.workspace"></che-workspace-status>
          <a ng-href="#/workspace/{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspace.config.name}}?tab=Config"
             uib-tooltip="Configure workspace">
            <span class="fa fa-cog"></span>
          </a>
          <span ng-click="workspaceItemCtrl.redirectToWorkspaceDetails('Projects');" uib-tooltip="Add project">
            <span class="fa fa-plus-square-o"></span>
          </span>
        </span>
      </div>
    </div>
  </div>
</che-list-item>
